<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <!-- flightsFilter组件 -->
          <FlightsFilter v-if="filtersData.info" :fdata="filtersData" @filterData="setFilterData" />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <FlightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <!-- 多个，遍历结构，并且传值给 封装的列表组件 -->
          <FlightsItem v-for="(item,index) in dataList" :key="index" :flightsData="item" />
          <div class="tips" v-if="isShow">没有查询到相关数据</div>
        </div>
        <!-- 底部分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="flightList.length"
        ></el-pagination>
      </div>
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <FlightAside />
      </div>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 所有机票数据 --源数据 100 > 10,这只是我们进行业务处理时的参照数据，我们在进行分页的时候会从这个数组中获取数据，但是永远不会修改这个数组
      flightList: [],       //所有航班信息-
      dataList: [],         // 当前页的列表数据，渲染数据改为遍历这个
      total: 0,             //总页数
      pageSize: 5,           //每页显示记录数  
      pageIndex: 1,          //当前页码
      filtersData: {},         //筛选组件的数据,对象结构 
      isShow: false
    }
  },
  mounted() {
    // 发请求，获取机票列表 http:127.0.0.1:1337/airs--
    this.getdata()
  },
  watch: {
    $route() {
      this.getdata()    //调用封装的获取机票列表的数据请求
    }
  },
  methods: {
    // 封装 获取机票列表的数据
    getdata() {
      // 发请求，获取机票列表 http:127.0.0.1:1337/airs---封装起来，watch中 点击历史查询要调用
      this.$axios({
        url: '/airs',
        params: this.$route.query
      }).then(res => {
        console.log(res);
        this.flightList = res.data.flights
        // this.total = res.data.total   //总页数---
        this.filtersData = { info: res.data.info, options: res.data.options, flights: res.data.flights }   //筛选组件的数据--只要info和options
        // 添加flights数组，因为进行筛选时，渲染列表需要机票信息
        console.log('筛选组件的数据', this.filtersData);

        // 调用  获取当前页数据的 函数
        this.getPageData()
      })
    },

    //获取当前页的数据
    getPageData() {
      // 我们需要从flightList: [] 数组中截取某些数据？
      this.dataList = this.flightList.slice(this.pageSize * (this.pageIndex - 1), this.pageSize * this.pageIndex)
      console.log(this.flightList.length)
    },

    // 调整每页记录数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      // 调用  获取当前页数据的 函数
      this.getPageData()
    },

    // 调整当前显示页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val;
      // 调用  获取当前页数据的 函数
      this.getPageData()
    },

    //渲染flightsFliter 筛选(过滤)过后的 机票列表
    setFilterData(arr) {
      if (arr.length > 0) {
        this.pageIndex = 1
        this.flightList = arr
      } else {
        // 没有数据给相关提示
        this.flightList = arr
        this.isShow = true;
        this.$message.info('没有查询到相关数据')
      }

      this.getPageData()
    }
  }
}
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
.tips {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
}
</style>